<!-- 帖子 -->
<template>
	<el-main style="padding: 20px;">
		<el-radio-group v-model="radio">
			<el-radio :label="item.categoryCode" v-for="(item, index) of type" :key="index">{{ item.categoryName }}
			</el-radio>
		</el-radio-group>
		<el-button v-if="radio==1" style="margin-left: 20px;" type="primary" size="mini" icon="el-icon-plus"
			@click="tianjia=true;lun=true">
			添加轮播图
		</el-button>

		<el-dialog :visible.sync="tianjia" width="80%">
			<el-form ref="form" :model="form" label-width="80px">
				<!-- <el-upload
            :disabled="disabled"
            :multiple="false"
            :action="url"
            name="fileData"
            :on-success="onsuss"
            list-type="picture-card"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove">
            <i class="el-icon-plus"></i>
          </el-upload> -->

				<el-upload class="avatar-uploader" action="/file/upload" name="fileData"
					:on-success="handlePictureCardPreview" :multiple="false" :show-file-list="false">
					<img v-if="dialogImageUrl" :src="dialogImageUrl" class="avatar" />
					<i v-else class="el-icon-plus avatar-uploader-icon"></i>
				</el-upload>
				</el-form-item>
				<el-button v-if="lun==true" type="primary" @click="tian()" style="margin-top: 20rpx;">确定</el-button>
				<el-button v-else type="primary" style="margin-top: 20rpx;" @click="tianhuan">替换</el-button>
				</el-form-item>
			</el-form>
		</el-dialog>

		<div class="table-box">
			<el-table :data="Lunbo" style="width: 100%">
				<el-table-column prop="" label="图片" width="600">
					<template slot-scope="scope">
						<img v-if="radio==1" style="width: 50%;" :src="scope.row.cover_url" alt="">
						<img v-else style="width: 50%;" :src="scope.row.picsUrl" alt="">
					</template>
				</el-table-column>
				<el-table-column label="操作">
					<template slot-scope="scope">
						<el-button v-if="radio==1" type="text" size="mini" @click="deleteObj(scope.row)">删除</el-button>
						<el-button v-else type="text" size="mini" @click="tihuan(scope.row)">替换</el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>
	</el-main>
</template>

<script>
	import {
		client
	} from '../../utils/client'
	export default {
		data() {
			return {
				form: {},
				dialogImageUrl: '',

				url: 'http://localhost:8082/front/file/upload',
				type: [{
						categoryCode: 1,
						categoryName: '轮播图'
					},
					{
						categoryCode: 2,
						categoryName: '启动图'
					}
				],
				tianjia: false,
				Lunbo: [],
				radio: 1,
				imgUrl: [],
				disabled: false,
				lun: true,
				shuju: {},
				file: {},
				name: "",
				
			};
		},
		watch: {
			radio() {
				if (this.radio == 1) {
					this.getLun()
				} else {
					this.getQi()
				}
			}
		},
		inject: ['reload'],
		mounted: function() {
			this.getLun()
		},
		methods: {

			tianhuan() {
				let that = this;
				let params = {
					"picsUrl": this.imgUrl,
				}
				this.postJson(`/back/startpics/addStartPics`, params).then(res => {
					//console.log(res)
					if (res.data.code == 10000) {
						that.postRequest(`/back/startpics/delStartPics?id=${that.shuju.id}`).then(res => {
							//console.log(res)
							that.$message(res.data.msg);
							that.reload()
						});
					}
				});
			},
			// 上传图片
			tian(file) {
				const that = this
				// 判断扩展名
				// this.$refs.upload.submit();
				let params = {
					"course_id": 1,
					"cover_url": this.imgUrl,
				}
				this.postJson(`/back/banner/addBanner`, params).then(res => {
					console.log(res)
					this.$message(res.data.msg);
					this.reload()
				});

			},
			//  tian(a){
			// // this.$refs.upload.submit();
			// console.log(a)
			//      let params = {
			//      "course_id": 1,
			//      "cover_url": this.dialogImageUrl,
			//      }
			//      this.postJson(`/back/banner/addBanner`,params).then(res => {

			//        this.$message(res.data.msg);
			//        this.reload()
			//      });
			//  },
			handleRemove(file, fileList) {
				//console.log(file, fileList);
			},
			handlePictureCardPreview(result, file) {
				this.dialogImageUrl = result.url;
				this.file = result
				this.imgUrl = result.url
			},
			getQi() {
				this.postRequest(`/back/startpics/getStartPicsList`).then(res => {
					console.log(this.Lunbo)
					this.Lunbo = res.data.data
				});
			},
			getLun() {
				this.postRequest(`/back/banner/getBannerList`).then(res => {

					this.Lunbo = res.data.data
					console.log(this.Lunbo)
				});
			},
			// onsuss(response, file, fileList){

			//   this.imgUrl=response.name;
			//   this.disabled = true;
			// },
			tihuan(e) {
				this.shuju = e;
				this.lun = false;
				this.tianjia = true;
			},
			deleteObj(e) {
				this.postRequest(`/back/banner/delBanner?id=${e.id}`).then(res => {
					//console.log(res)
					this.$message(res.data.msg);
					this.reload()
				});
			},
		}
	};
</script>

<style scoped="scoped">
	.avatar-uploader .el-upload {
		border: 1px dashed #d9d9d9;
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
	}

	.avatar-uploader .el-upload:hover {
		border-color: #409eff;
	}

	.avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		width: 178px;
		height: 178px;
		line-height: 178px;
		text-align: center;
	}

	.avatar {
		width: 178px;
		height: 178px;
		display: block;
	}

	.avatar-uploader .el-upload {
		border: 1px dashed #d9d9d9;
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
	}
</style>
